<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加空气质量信息</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/1.12.3/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.20.0/dist/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.20.0/dist/localization/messages_zh.min.js"></script>
    <style>
        #box {
            margin: 100px auto;
            width: 270px;
            padding: 0 50px 20px 50px;
            border: 1px solid #999;
        }
        #box h1 {
            margin-bottom: 40px;
        }
        #box table tr:last-child {
            text-align: center;
        }
    </style>
</head>
<body>
<div id="box">
    <h1>添加空气质量信息</h1>
    <form id="signupForm">
        <table>
            <tr>
                <td>监测区域：</td>
                <td><select id="area" name="area">
                    <option value="">请选择</option>
                </select></td>
            </tr>
            <tr>
                <td>检测日期：</td>
                <td><input type="text" name="monitorTime" id="monitorTime"></td>
            </tr>
            <tr>
                <td>PM10值：</td>
                <td><input type="text" name="pm10" id="pm10"></td>
            </tr>
            <tr>
                <td>PM2.5值：</td>
                <td><input type="text" name="pm25" id="pm25"></td>
            </tr>
            <tr>
                <td>监测站：</td>
                <td><input type="text" name="monitoringStation" id="monitoringStation"></td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" value="保存" id="submitBtn">
                    <input type="reset" value="重置">
                    <input type="button" value="返回" id="back">
                </td>
            </tr>
        </table>
    </form>
</div>
</body>
<script>
    $(document).ready(function() {
        // 初始化监测区域的下拉选项
        $.ajax({
            type: "post",
            url: "/getDistricts.do",
            success: function(res) {
                for (let re of res) {
                    $("#area").append($("<option></option>").text(re.name).val(re.id));
                }
            }
        });
        $("#submitBtn").click(function (){
            submit()
        })
        // 表单验证逻辑
        function submit() {
            $("#signupForm").validate({
                rules: {
                    area: {
                        required: true
                    },
                    monitorTime: {
                        required: true,
                        dateISO: true // ISO格式的日期验证（YYYY-MM-DD）
                    },
                    pm10: {
                        required: true,
                        digits: true
                    },
                    pm25: {
                        required: true,
                        digits: true
                    },
                    monitoringStation: {
                        required: true
                    }
                },
                messages: {
                    area: {
                        required: "请选择监测区域"
                    },
                    monitorTime: {
                        required: "检测日期不能为空",
                        dateISO: "请输入有效的日期格式 (YYYY-MM-DD)"
                    },
                    pm10: {
                        required: "PM10值不能为空",
                        digits: "PM10值只能为整数"
                    },
                    pm25: {
                        required: "PM2.5值不能为空",
                        digits: "PM2.5值只能为整数"
                    },
                    monitoringStation: {
                        required: "监测站不能为空"
                    }
                },
                //更改错误信息显示的位置
                errorPlacement: function(error, element) {
                    // 禁用错误信息显示在表单中
                },
                // 验证不通过时调用
                invalidHandler: function(event, validator) {
                    var errors = validator.errorList;
                    if (errors.length > 0) {
                        alert(errors[0].message); // 提示第一个错误信息
                    }
                },
                // 验证通过后调用
                submitHandler: function () {
                    // 使用 AJAX 提交表单
                    $.ajax({
                        type: "post",
                        url: "/addAir.do",
                        contentType: "application/json",
                        data: JSON.stringify({
                            monitorTime: $("#monitorTime").val(),
                            pm10: $("#pm10").val(),
                            pm25: $("#pm25").val(),
                            monitoringStation: $("#monitoringStation").val(),
                            lastModifyTime: new Date().toLocaleDateString('en-CA'),
                            district: {id: $("#area").val()}
                        }),
                        success: function (res) {
                            if (res === "true") {
                                location.href = "infor.html";
                            } else {
                                alert("保存失败！");
                            }
                        }
                    });
                }
            });
        }

        // 提交按钮点击事件
        $('#submitBtn').click(function(event) {
            event.preventDefault(); // 阻止默认提交
            $("#signupForm").submit(); // 触发表单验证和提交
        });

        // 返回按钮点击事件
        $("#back").click(function (){
            location.href = "infor.html";
        });
    });
</script>
</html>
